<!DOCTYPE html>
<html>
<head>


	<meta name="layout" content="main" />
	<style type="text/css">
	</style>
	

</head>

<body>
<div id="map-canvas" style="display: none;" ></div>
	<div class="pagewrapper" style="position: relative;">
		<img src="${resource(dir: 'images', file: 'edit.png')}"
			style="height: 40px; z-index: 20; top: 28px; position: absolute; left: 8%;">
		<a class="a-add-place-nhieu"
			style="text-align: left; height: 40px; width: 50%; z-index: 20; text-decoration: none; cursor: default; font-size: 250%; font-weight: bold; top: 28px; left: 13%;">Edit
			Profile </a>
		<!-- ga dien -->
		<div class="superProfile"
			style="left: 60px; width: 90%; height: 500px; position: absolute; z-index: 1; top: 85px; background-color: #EEEEEE;">
			<!-- basic form -->
			<div id="uInfo"
				style="width: 100%; height: 440px; position: absolute; z-index: 10; top: 30px; left: 5%;">
				<div id="subInfo"
					style="width: 45%; height: 365px; position: absolute; z-index: 10; top: 20px; left: 2%; display: none">
					<fieldset
						style="border: 2px solid #9F9595; width: 89.3%; height: 355px; position: absolute; z-index: 20;">
						<legend style="font-size: 15px; margin-left: 5px">User
							Information:</legend>
						<div class="div-row-add-place3" style="top: 20px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Your email:</a> 
							<label  class="label-add-place2"  style="text-decoration: none;cursor: default;">${ user.email }</label>
							<input type="text" value="${user.email }" id="email" class="tf-add-place3" style="display:none;">
						</div>
						<div class="div-row-add-place3" style="top: 66px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Password:</a> <input
								type="password" value=""id="password" class="tf-add-place3" style="">
						</div>
						<div class="div-row-add-place3" style="top: 112px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Retype-Password:</a> <input
								type="password" value="" id="rtpassword"  class="tf-add-place3" style="">
						</div>
						<div class="div-row-add-place3" style="top: 158px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Full Name:</a> <input
								type="text" value="${user.fullName }" id="fullname" class="tf-add-place3" style="">
						</div>
						<div class="div-row-add-place3" style="top: 204px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Date of birth:</a>
							 <input type="text" id="datetimepicker"  value="${user.birthday }" class="tf-add-place3" style="">
						</div>
						<div class="div-row-add-place3" style="top: 248px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Gender:</a> <select
								class="tf-add-place3" onselect="${user.gender }" id="gender"  style="height: 31px; width: 50.5%;">
								<option>Female</option>
								<option>Male</option>
								<option>Other</option>
							</select>
						</div>
						<!-- <div class="bt-app" id="app-bt-next1"
							style="left: 80%; width: 15%; margin-top: 245px; background-color: #00A4D3">
							<a class="a-add-place-nhieu"
								style="text-decoration: none; position: absolute; cursor: default; top: 7px; color: white; text-align: center;">Save</a>
						</div> -->
						<input type="submit" value="Save" id="save1" style="position: absolute;z-index: 20;width:18%;height: 30px;left: 80%;top: 315px;">
						
					</fieldset>
				</div>
				<!-- test show hide -->
				<div id="testinfo"
					style="width: 100%; height: 440px; z-index: 10; top: 30px; left: 5%;">
					<div id="subtest"
						style="width: 41%; height: 365px; position: absolute; z-index: 10; top: 20px; left: 2%;">
						<fieldset
							style="border: 2px solid #9F9595; width: 98%; height:355px; position: absolute;">
							<legend style="font-size: 15px; margin-left: 5px">Edit
								Information:</legend>
							<div class="div-row-add-place3" style="top: 20px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Your email:</a>
								<label class="label-add-place2" id="email1" style="text-decoration: none;cursor: default;">${ user.email }</label>
								
							</div>
							<div class="div-row-add-place3" style="top: 66px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Password:</a>
							</div>
							<div class="div-row-add-place3" style="top: 112px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Full Name:</a>
								<label class="label-add-place2" id="fullname1" style="text-decoration: none;cursor: default;">${ user.fullName }</label>
							</div>
							<div class="div-row-add-place3" style="top: 158px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Date of birth:</a>
								<label class="label-add-place2" id="birthday1" style="text-decoration: none;cursor: default;">
									<g:formatDate format="MM/dd/yyyy" date="${user.birthday}" style=" display:none;"/>
								</label>
							</div>
							<div class="div-row-add-place3" style="top: 204px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Gender:</a>
								<label class="label-add-place2" id="gender1" style="text-decoration: none;cursor: default;">${ user.gender }</label>
							</div>
							<input type="submit" value="Edit" id="edit1" style="position: absolute;z-index: 20;width: 18%;height: 30px;left: 80%;top: 315px;">
						</fieldset>
					</div>
					<!-- test show hide -->
				</div>

			</div>

			<div id="contactInfo"
				style="width: 50%; height: 350px; position: absolute; z-index: 10; top: 5px; left: 50%;">
				<div id="subcontact"
					style="width: 90%; height: 200px; position: absolute; z-index: 10; top: 45px; left: 2%; display: none">
					<fieldset
						style="border: 2px solid #9F9595; width: 90%; height: 180px; position: absolute; z-index: 20;">
						<legend style="font-size: 15px; margin-left: 5px">Contact
							Information:</legend>
						<div class="div-row-add-place3" style="top: 20px;">
							<a class="label-add-place"  style="text-decoration: none;cursor: default;">Company :</a> <input
								type="text" value="${user.company }" id="company" class="tf-add-place3" style="">
						</div>
<%--						<div class="div-row-add-place3" style="top: 66px;">--%>
<%--							<a class="label-add-place" style="">Phone number:</a> <input--%>
<%--								type="text" class="tf-add-place3" style="">--%>
<%--						</div>--%>
<%--						<div class="div-row-add-place3" style="top: 112px;">--%>
<%--							<a class="label-add-place" style="">Office phone:</a> <input--%>
<%--								type="text" class="tf-add-place3" style="">--%>
<%--						</div>--%>
						<div class="div-row-add-place3" style="top: 66px;">
							<a class="label-add-place" style="text-decoration: none;cursor: default;">Web site:</a> <input
								type="text" value="${user.website }" id="website" class="tf-add-place3" style="">
						</div>
<%--						<div class="div-row-add-place3" style="top: 204px;">--%>
<%--							<a class="label-add-place" style="">Contact email:</a> <input--%>
<%--								type="text" class="tf-add-place3" style="">--%>
<%--						</div>--%>
						<input type="submit" value="Save" id="save2" style="position: absolute;z-index: 20;width: 18%;height: 30px;left: 80%;top: 140px;">
					</fieldset>

				</div>
				<!-- test met qua -->
				<div id="testContact"
					style="width: 100%; height: 350px; z-index: 10; top: 30px; left: 50%;">
					<div id="subContacttest"
						style="width: 90%; height: 190px; position: absolute; z-index: 10; top: 45px; left: 2%;">
						<fieldset
							style="border: 2px solid #9F9595; width: 90%; height: 180px; position: absolute;">
							<legend style="font-size: 15px; margin-left: 5px">Edit
								contact Information:</legend>
							<div class="div-row-add-place3" style="top: 20px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Company :</a>
								<label class="label-add-place2" id="company1" style="text-decoration: none;cursor: default;">${ user.company }</label>
							</div>
<%--							<div class="div-row-add-place3" style="top: 66px;">--%>
<%--								<a class="label-add-place" style="">Phone number:</a>--%>
<%--							</div>--%>
<%--							<div class="div-row-add-place3" style="top: 112px;">--%>
<%--								<a class="label-add-place" style="">Office phone:</a>--%>
<%--							</div>--%>
							<div class="div-row-add-place3" style="top: 66px;">
								<a class="label-add-place" style="text-decoration: none;cursor: default;">Web site:</a>
								<label class="label-add-place2" id="website1" style="text-decoration: none;cursor: default;">${ user.website }</label>
							</div>
<%--							<div class="div-row-add-place3" style="top: 204px;">--%>
<%--								<a class="label-add-place" style="">Contact email:</a>--%>
<%--							</div>--%>
							<!-- <div class="bt-app" id="app-bt-next3" onclick="testContact();"
								style="left: 80%; width: 15%; margin-top: 245px; background-color: #00A4D3">
								<a class="a-add-place-nhieu"
									style="text-decoration: none; position: absolute; cursor: default; top: 7px; color: white; text-align: center;">Edit</a>
							</div> -->
							<input type="submit" id="edit2" value="Edit" style="position: absolute;z-index: 20;width:18%;height: 30px;left: 80%;top: 140px;">
							
						</fieldset>
					</div>
				</div>
				<!-- test contact -->
			</div>
			<div id="upPicture"
				style="height: 130px; width: 40.6%; top: 275px; left: 51%; position: absolute; z-index: 10;">
				<fieldset
					style="border: 2px solid #9F9595; width: 100%; height: 130px; position: absolute; z-index: 20;">
					<legend style="font-size: 15px; margin-left: 5px;">Change
						your picture:</legend>
					<div id="div-upload"
						style="width: 50%; height: 100px; margin-left: 4px; margin-top: 3px; float: left">
					<g:if test="${user.avatar==null}" >
							
							<img src="${resource(dir: 'images', file: 'male.png')}"
								style="width: 50%; height: 99px;">
					</g:if>
					<g:else>
							<img src="${createLink(uri:'/Avatar/getAvatarUser?userID='+session.user.id)}"
								style="width: 50%; height: 99px;">
<%--								<script>alert(""+user.id) </script>--%>
					</g:else>
					
					</div>
					<div id="location"
						style="width: 60%; left: 35%; height: 70px; position: absolute; z-index: 15;">
						<p style="font-size: 15px">Location of picture:</p>
						<g:uploadForm action="uploadavatar">
							<input type="file" name="useravatar" id="useravatar" style="margin-top: 5px; width: 90%;">
							<input type="text" value="${user.email }" name="email" style="display:none">
							<input type="submit" id="bt-upload" value="Save" style="position: absolute;z-index: 20;width:28%;height: 30px;left: 75%;top: 70px;">
						</g:uploadForm>
					</div>
					<div class="upLoad" 
						style="left: 80%; width: 5%; margin-top: 245px; background-color: #00A4D3">
						
						
						<!-- <div class="bt-app" id="app-bt-next3"
							style="left: 80%; width: 15%; top: 90px; background-color: #00A4D3; z-index: 20;">
							<a class="a-add-place-nhieu"
								style="text-decoration: none; position: absolute; cursor: default; top: 7px; color: white; text-align: center;">Edit</a>
						</div> -->
					</div>
					
				</fieldset>
			</div>
		</div>
	</div>
</body>
</html>